<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
      <script src='/_ah/channel/jsapi'></script>
      <style type='text/css'>
        body {
          font-family: 'Helvetica';
        }

        #board {
          width:152px;
          height: 152px;
          margin: 20px auto;
        }

        #display-area {
          text-align: center;
        }

        #this-game {
          font-size: 9pt;
        }

        #winner {
        }

        table {
          border-collapse: collapse;
        }

        td {
          width: 50px;
          height: 50px;
          font-family: "Helvetica";
          font-size: 16pt;
          text-align: center;
          vertical-align: middle;
          margin:0px;
          padding: 0px;
        }

        div.cell {
          float: left;
          width: 50px;
          height: 50px;
          border: none;
          margin: 0px;
          padding: 0px;
        }

        div.mark {
          position: absolute;
          top: 15px;
        }

        div.l {
          border-right: 1pt solid black;
        }

        div.c {
        }

        div.r {
          border-left: 1pt solid black;
        }

        div.t {
          border-bottom: 1pt solid black;
        }

        div.m {
        }

        div.b {
          border-top: 1pt solid black;
        }
      </style>
  </head>
  <body>
  
    <script type='text/javascript'>
      onMessage = function(m) {
    	console.log('message received..');
    	console.log(m);
      }

      initialize = function() {
    	  console.log(' token for this session : ' + '<c:out value="${token}"></c:out>'); 
          var token = '<c:out value="${token}"></c:out>';
          var channel = new goog.appengine.Channel(token);
          var handler = {
            'onmessage': onMessage,
            'onopen': onOpened,
            'onerror': function() {alert('error occured');},  
            'onclose': function() {}
          };
          var socket = channel.open(handler);
          socket.onmessage = onMessage;
          socket.onopen = onOpened;
      }
      
      onOpened = function() {
         // sendMessage('/opened');
      };
      
      sendMessage = function(){
    	  var xhr = new XMLHttpRequest();
          xhr.open('POST', '/home/testSend.htm', true);
          xhr.send();
      }

      setTimeout(initialize, 100);

    </script>
    <div id='display-area'>
      <h2>Channel-based Tic Tac Toe</h2>
      <div id='other-player' style='display:none'>
        Waiting for another player to join.<br>
        Send them this link to play:<br>
        <div id='game-link'><a href='{{ game_link }}'>{{ game_link }}</a></div>
      </div>
      <div id='your-move' style='display:none'>
        Your move! Click a square to place your piece.
      </div>
      <div id='their-move' style='display:none'>
        Waiting for other player to move...
      </div>
      <div id='you-won'>
        You won this game!
      </div>
      <div id='you-lost'>
        You lost this game.
      </div>
      <div id='board'>
        <div class='t l cell'><table><tr><td id='0'></td></tr></td></table></div>
        <div class='t c cell'><table><tr><td id='1'></td></tr></td></table></div>
        <div class='t r cell'><table><tr><td id='2'></td></tr></td></table></div>
        <div class='m l cell'><table><tr><td id='3'></td></tr></td></table></div>
        <div class='m c cell'><table><tr><td id='4'></td></tr></td></table></div>
        <div class='m r cell'><table><tr><td id='5'></td></tr></td></table></div>
        <div class='b l cell'><table><tr><td id='6'></td></tr></td></table></div>
        <div class='b c cell'><table><tr><td id='7'></td></tr></td></table></div>
        <div class='b r cell'><table><tr><td id='8'></td></tr></td></table></div>
      </div>
      <div id='this-game' float='top'>
        test send/receive : <span id='this-game-link'><a href='javascript:void(0)' onclick="javascript:sendMessage()">here</a></span> 
      </div>
    </div>
  </body>
</html>